<template>
    
<h2>房型显示列表展示</h2>

  房型名称: <input type="text" v-model="RoomTypeName">
  <input type="button" value="查询" @click="LodData">
  <input type="button" value="批量删除" @click="Delte" style="margin-right: 20px;">
  <input type="button" value="导出" @click="ExportData">
<table border="1" class="table table-info">
    <thead>
        <tr>
            <td><input type="checkbox" v-model="quan" @change="qAll"></td>
            <td>房型编号</td>
            <td>房型名称</td>
            <td>门市价</td>
            <td>押金</td>
            <td>面积</td>
            <td>可住人数</td>
            <td>是否加床</td>
            <td>房型图片</td>
            <td>房型介绍</td>
            <td>房型是否投放</td>
            <td>操作列</td>
        </tr>
    </thead>
    <tbody>

        <tr v-for="item in info">
            <td><input type="checkbox" v-model="newArry" :checked="fan" :value="item.RtypeId" @change="FAll"></td>
            <td>{{item.RtypeId}}</td>
            <td>{{item.Rtype_Name}}</td>
            <td>{{item.Rtype_Price}}</td>
            <td>{{item.Rtype_Depoosit}}</td>
            <td>{{item.Rtype_Size}}</td>
            <td>{{item.Rtype_Num}}</td>
            <td>{{item.Rtype_AddBed==true?"是":"否"}}</td>
            <td><img style="width: 60px; height: 60px;" :src="item.Rtype_Img"></td>
            <td>{{item.Rtype_Info}}</td>
            <td>{{item.Rtype_State==true?"投放":"暂不投放"}}</td>
            <td>操作列
                <a href="#" style="margin-right: 20px;" @click="Del(item.RtypeId)">删除</a>
                <a href="#" style="margin-right: 20px;" @click="Upd(item.RtypeId)">修改</a>
            </td>
        </tr>
    </tbody>
   
</table>

当前共{{ pageInfo.totalCount }}条,当前页共{{ pageInfo.pageSize }}条
当前页共{{ pageInfo.pageIndex }}/{{ pageInfo.pageCount }}页
<span>
    <a href="#"  style="margin-right: 20px;"  @click="pageChange('F')">首页</a>
    <a href="#"  style="margin-right: 20px;"  @click="pageChange('U')">上一页</a>
    <a href="#"  style="margin-right: 20px;"  @click="pageChange('N')">下一页</a>
    <a href="#"  style="margin-right: 20px;"  @click="pageChange('E')">尾页</a>
</span>

</template>
<script setup lang="ts">


import {onMounted, ref} from 'vue';
import axios from  'axios'
import { useRouter } from 'vue-router';



const ExportData=()=>{


axios.post('https://localhost:7153/api/T_RoomType/Export?Fpath='+'C:\\Users\\27084\Desktop\\王梦真11.26作业\\RoomTypeDemo.xlsx')
.then(res=>{
    if(res.data>0){
        alert("导出成功");
    }
    else{
        alert("导出失败");
    }
})


}


//全选反选
const quan=ref(false);

const fan=ref(false);

const newArry=ref([]);
//全选
const qAll=()=>{

if(quan.value==true){
    fan.value==true;
    newArry.value=info.value.map((i:any)=>{
       return i.RtypeId 
    

    })

}
else{
    fan.value==false;
    newArry.value=[];
}


}

//反选
const FAll=()=>{

    if(newArry.value.length==info.value.length){

        quan.value=true;

    }
    else{
        quan.value=false;
    }

}

//批量删除
const Delte=()=>{

    if(confirm("你确定要删除吗?")){
        axios.get('https://localhost:7153/api/T_RoomType/DeleteRoomType'
        ,
        {
            params:{
                ids:newArry.value.toString()
            }
        }

        )

        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                LodData();
            }
            else{
                alert("删除失败");
            }
        })




    }



}


//跳转修改
const router=useRouter();

const Upd=(RoomtypeId:number)=>{
    router.push({
        name:"UpdateRommType",
        params:{
            id:RoomtypeId
        }
    })

}



//单删
const Del=(RoomtypeId:number)=>{

    if(confirm("你确定要删除吗?")){
        axios.get('https://localhost:7153/api/T_RoomType/DelRoomType',
        
        {
            params:{
                RoomTypeId:RoomtypeId
            }
        }
        
        )
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                LodData();
            }
            else{
                alert("删除失败");
            }
        })
    }

}


const info:any=ref([{

 RtypeId:0,
Rtype_Name: "",
Rtype_Price: "",
Rtype_Depoosit: "",
Rtype_Size: "",
Rtype_Num: "",
Rtype_AddBed: true,
Rtype_Img: "",
Rtype_Info: "",
Rtype_State: false,

}])

const RoomTypeName=ref("");

const pageInfo=ref({
    pageIndex:1,
    pageSize:2,
    totalCount:0,
    pageCount:0

})

onMounted(()=>{
    LodData();
})

const LodData=()=>{
    axios.get('https://localhost:7153/api/T_RoomType/ShowRoomType',
    
    {
        params:{
            RoomTypeName:RoomTypeName.value,
            pageIndex:pageInfo.value.pageIndex,
            pageSize:pageInfo.value.pageSize

        }
    }
    
    )

    .then(res=>{
        pageInfo.value.pageCount=res.data.PageCount;
        pageInfo.value.totalCount=res.data.TotalCount;
        info.value=res.data.Data_Info
    })
}


//分页

const pageChange=(choose:string)=>{

    switch(choose){
        case 'F':
            pageInfo.value.pageIndex=1
            break;
            case 'U':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex-1
            break;
            case 'N':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex+1
            break;
            case 'E':
            pageInfo.value.pageIndex=pageInfo.value.pageCount
            break;
    }
LodData();

}


</script>